<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
  <script src="../init.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Hue</h2>

<p>Hue is the color reflected from or transmitted through an object 
and is typically referred to as the name of the color (red, blue, yellow, etc.) 
Move the cursor vertically over each bar to alter its hue.</p>

<p><a href="http://processing.org/learning/basics/hue.html"><b>Original Processing.org Example:</b> Hue</a><br>
<script type="application/processing">
int barWidth = 5;
int[] hue;

void setup() 
{
  size(400, 400);
  colorMode(HSB, 360, height, height);  
  hue = new int[width/barWidth];
  noStroke();
}

void draw() 
{
  int j = 0;
  for (int i=0; i<=(width-barWidth); i+=barWidth) {  
    if ((mouseX > i) && (mouseX < i+barWidth)) {
      hue[j] = mouseY;
    }
    fill(hue[j], height/1.2, height/1.2);
    rect(i, 0, barWidth, height);  
    j++;
  }
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
int barWidth = 5;
int[] hue;

void setup() 
{
  size(400, 400);
  colorMode(HSB, 360, height, height);  
  hue = new int[width/barWidth];
  noStroke();
}

void draw() 
{
  int j = 0;
  for (int i=0; i&lt;=(width-barWidth); i+=barWidth) {  
    if ((mouseX &gt; i) && (mouseX &lt; i+barWidth)) {
      hue[j] = mouseY;
    }
    fill(hue[j], height/1.2, height/1.2);
    rect(i, 0, barWidth, height);  
    j++;
  }
}</pre>
</body>
</html>
